<template>
  <a-card :bordered="false">
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="formDisabled">
        <a-form :form="form" slot="detail">
          <a-row>
            <div style="width:100%;">
              <h2>时间限制</h2>
            </div>
            <a-row :gutter="0">
              <a-col :span="12">
                <a-form-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-date placeholder="请选择开始时间" v-decorator="['beginDate', validatorRules.beginDate]"
                    :trigger-change="true" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 50%" />
                </a-form-item>
              </a-col>
              <a-col :span="12" style="margin-left: -250px;">
                <a-form-item label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-date placeholder="请选择结束时间" v-decorator="['endDate', validatorRules.endDate]" :trigger-change="true"
                    :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 50%" />
                </a-form-item>
              </a-col>
            </a-row>
            <div style="width:100%;">
              <h2>车次限制</h2>
            </div>
            <a-row :gutter="0">
              <a-col :span="12">
                <a-form-item label="限制类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-dict-select-tag type="list" v-decorator="['type', validatorRules.type]" :trigger-change="true"
                    dictCode="xzlx" placeholder="请选择限制类型" style="width: 50%" />
                </a-form-item>
              </a-col>
              <a-col :span="12" style="margin-left: -250px;">
                <a-form-item label="运输车辆" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input-number v-decorator="['carNum', validatorRules.carNum]" placeholder="请输入运输车辆"
                    style="width: 50%"></a-input-number>
                </a-form-item>
              </a-col>
            </a-row>
            <div style="width:100%;">
              <h2>占比限制(%)</h2>
            </div>
            <a-row :gutter="0">
              <a-col :span="8" style="margin-left: 65px;">
                <a-form-item label="国四及以下" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input-number v-decorator="['fourthStage', validatorRules.fourthStage]" placeholder="请输入国四及以下"
                    style="width: 40%" />
                </a-form-item>
              </a-col>
              <a-col :span="8" style="margin-left: -200px;">
                <a-form-item label="国五占比" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input-number v-decorator="['fifthStage', validatorRules.fifthStage]" placeholder="请输入国五占比"
                    style="width: 40%" />
                </a-form-item>
              </a-col>
              <a-col :span="8" style="margin-left: -185px;">
                <a-form-item label="国六及以上" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input-number v-decorator="['sixthStage', validatorRules.sixthStage]" placeholder="请输入国六及以上"
                    style="width: 40%" />
                </a-form-item>
              </a-col>
            </a-row>
            <div style="width:100%;">
              <h2>排放限制(允许通行)</h2>
            </div>
            <a-row :gutter="0">
              <a-col :span="24" style="margin-left: -140px;">
                <a-form-item label="排放限制" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-multi-select-tag type="list_multi" v-decorator="['envType', validatorRules.envType]"
                    :trigger-change="true" dictCode="pflx" placeholder="请选择排放限制" style="width: 100%" />
                </a-form-item>
              </a-col>
            </a-row>
            <div style="width:100%;">
              <h2>进出限制</h2>
            </div>
            <a-row :gutter="0">
              <a-col :span="24" style="margin-left: -140px;">
                <a-form-item label="运输车辆" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-dict-select-tag type="list" v-decorator="['carType', validatorRules.carType]"
                    :trigger-change="true" dictCode="jcxz" placeholder="请选择进出限制" style="width: 10%" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-col :span="24" style="text-align: center">
              <a-button type="primary" @click="submitForm">确认保存</a-button>
            </a-col>
          </a-row>
        </a-form>
      </j-form-container>
    </a-spin>
  </a-card>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import { validateDuplicateValue } from '@/utils/util'

export default {
  name: 'ControlStrategyForm',
  components: {
  },
  props: {
    //流程表单data
    formData: {
      type: Object,
      default: () => { },
      required: false
    },
    //表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5, offset: 0 }, // 标签列的设置
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19, offset: 0 }, // 包装列的设置，调整span为19，使输入框左对齐
      },
      confirmLoading: false,
      validatorRules: {
        fourthStage: {
          rules: [
            { required: true, message: '请输入国四及以下占比!' },
            {
              validator: (rule, value, callback) => {
                const reg = /^[0-9]*$/;
                if (value === '') {
                  callback();
                } else if (!reg.test(value)) {
                  callback(new Error('请输入整数'));
                } else if (parseInt(value) > 100) {
                  callback(new Error('请输入不大于100的整数'));
                } else {
                  callback();
                }
              },
            },
          ]
        },
        fifthStage: {
          rules: [
            { required: true, message: '请输入国五占比!' },
            {
              validator: (rule, value, callback) => {
                const reg = /^[0-9]*$/;
                if (value === '') {
                  callback();
                } else if (!reg.test(value)) {
                  callback(new Error('请输入整数'));
                } else if (parseInt(value) > 100) {
                  callback(new Error('请输入不大于100的整数'));
                } else {
                  callback();
                }
              },
            },
          ]
        },
        sixthStage: {
          rules: [
            { required: true, message: '请输入国六及以上占比!' },
            {
              validator: (rule, value, callback) => {
                const reg = /^[0-9]*$/;
                if (value === '') {
                  callback();
                } else if (!reg.test(value)) {
                  callback(new Error('请输入整数'));
                } else if (parseInt(value) > 100) {
                  callback(new Error('请输入不大于100的整数'));
                } else {
                  callback();
                }
              },
            },
          ]
        },
        beginDate: {
          rules: [
            { required: true, message: '请选择开始时间!' },
          ]
        },
        endDate: {
          rules: [
            { required: true, message: '请选择结束时间!' },
          ]
        },
        type: {
          rules: [
            { required: true, message: '请选择限制类型!' },
          ]
        },
        carNum: {
          rules: [
            { required: true, message: '请输入运输车辆!(数字)' },
          ]
        },
        envType: {
          rules: [
            { required: true, message: '请选择排放限制!' },
          ]
        },
        carType: {
          rules: [
            { required: true, message: '请选择进出限制!' },
          ]
        },
      },
      url: {
        add: "/controlStrategy/controlStrategy/add",
        edit: "/controlStrategy/controlStrategy/edit",
        queryById: "/controlStrategy/controlStrategy/queryById",
        list: "/controlStrategy/controlStrategy/listOne",
      },
      controlStrategy: {},
    }
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return true
        }
      }
      return false
    }
  },
  created() {
    //如果是流程中表单，则需要加载流程表单data
    this.showFlowData();
    this.list();
  },
  methods: {
    list() {
      getAction(this.url.list).then((res) => {
        if (res.success) {
          this.controlStrategy = res.result;
          this.popupCallback(this.controlStrategy);
        }
      });
    },
    add() {
      this.edit({});
    },
    edit(record) {
      this.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'id','beginDate', 'endDate', 'type', 'carNum', 'fourthStage', 'fifthStage', 'sixthStage', 'envType', 'carType'))
      })
    },
    //渲染流程表单数据
    showFlowData() {
      if (this.formBpm === true) {
        let params = { id: this.formData.dataId };
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.edit(res.result);
          }
        });
      }
    },
    submitForm() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          // if (!this.model.id) {
          //   httpurl += this.url.add;
          //   method = 'post';
          // } else {
          //   httpurl += this.url.edit;
          //   method = 'put';
          // }
          this.model.id = this.controlStrategy.id;
          httpurl += this.url.edit;
          method = 'put';
          let formData = Object.assign(this.model, values);
          console.log("表单提交数据", formData)
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
          })
        }

      })
    },
    popupCallback(row) {
      this.form.setFieldsValue(pick(row, 'id','beginDate', 'endDate', 'type', 'carNum', 'fourthStage', 'fifthStage', 'sixthStage', 'envType', 'carType'))
    },
  }
}
</script>
<style scoped>
/* 内嵌子表背景颜色 */
.j-inner-table-wrapper /deep/ .ant-table-expanded-row .ant-table-wrapper .ant-table-tbody .ant-table-row {
  background-color: #FFFFFF;
}
</style>